<template>
	<view class="forum-page">
		<navCom></navCom>
		<view>
			<u-tabs :list="tabList" lineWidth="32" lineHeight="4" :scrollable="false" keyName="title"
				lineColor="linear-gradient(170deg, #FFA5F5, #319EFF)" :inactiveStyle="{'color':'#999'}"
				:activeStyle="{'color':'#34314F','fontWeight':'bold'}" @click="handleTabClick"
				:current="currentTab"></u-tabs>
		</view>
		<view class="m30" v-if="listData.length > 0">
			<waterfall-flow :dataArray="listData"></waterfall-flow>
		</view>
	</view>
</template>

<script>
	import waterfallFlow from '@/components/waterfall-flow/index.vue'
	import navCom from '@/components/nav/nav.vue';
	import {
		getVlogcate
	} from '@/common/api_wan.js';
	import {
		getVlogList
	} from '@/common/api_meethuangshi.js'
	export default {
		components: {
			waterfallFlow,
			navCom
		},
		data() {
			return {
				pageNum: 1,
				lastPage: true,
				currentTab: 0,
				tabList: [],
				listData: []
			}
		},
		onLoad() {
			this.getVlogcate()
		},
		onReachBottom() {
			if (!this.lastPage) {
				this.pageNum += 1
				this.getVlogList()
			}
		},
		methods: {
			async getVlogcate() {
				uni.showLoading({
					mask: true
				})
				const res = await getVlogcate()
				if (res.code == 200) {
					this.tabList = res.data.dynamicTypes;
					this.getVlogList()
					uni.hideLoading()
				}
			},
			async getVlogList() {
				uni.showLoading({
					mask: true
				})
				const res = await getVlogList({
					pageSize: 5,
					typeId:this.tabList[this.currentTab].id,
					pageNum: this.pageNum
				})
				if (res.code == 200) {
					// this.listData = res.data
					this.listData = this.listData.concat(res.data);
					this.lastPage = res.lastPage;
					console.log(this.listData, '88888');
				}
				uni.hideLoading()
			},
			handleTabClick(item) {
				this.listData = [];
				this.pageNum = 1;
				this.lastPage = true;
				this.currentTab = item.index;
				this.getVlogList()
			},
			handleForumDetail(item) {
				uni.navigateTo({
					url: `/subpage/meethuangshi/forumDetail?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F7F6FF;
	}
</style>